<template>
  <view class="affair_record">
    <view class="record_item">
      <view class="header">
        <view class="header_left">
          <view class="num">{{ index + 1 }}</view>
          <view class="partNameItem">
            <view
              class="partNameLabel"
              v-for="(item, index) in checkContentName"
              :key="index"
              >{{ item }}
              <image
                src="/static/images/repairFitting/right.png"
                class="image"
                v-if="index !== checkContentName.length - 1"
              />
            </view>
            <text v-if="checkContentName && checkContentName.length && msg.floorStandNames">({{ msg.floorStandNames.replaceAll(',','>') }})</text>
          </view>
        </view>

        <view class="handle">
          <view
            v-if="orderStatus !== 4 && msg.userId == userinfo.user_id"
            class="handle_item"
          >
            <view @click="handleEdit" class="editBtn">
              <image src="/static/images/edit2.png" mode=""></image>
            </view>
            <view @click="handleDel" class="delBtn">
              <image src="/static/images/del.png" mode=""></image>
            </view>
          </view>
          <view
            v-if="
              orderStatus == 4 &&
              msg.userId == userinfo.user_id &&
              msg.childPlanId == null
            "
          >
            <view class="reformBtn" @click="hanleReform">
              <uni-icons type="plusempty" color="#0091ff" :size="18"></uni-icons>
              发起整改任务</view>
          </view>
        </view>
      </view>

      <view class="content" :style="{ border: isLast ? 'none' : '' }">
        <view class="content_item">
          <view class="label"> 紧急程度: </view>
          <view :class="['tag', msg.emerProcType == 1 ? 'red' : '']">{{
            ["", "非常紧急", "紧急", "普通", "较低"][msg.emerProcType]
          }}</view>
        </view>
        <view class="content_item">
          <view class="label"> 问题分类: </view>
          <view class="tag">{{ msg.faultReasonClassifiedName }}</view>
        </view>

        <view class="imgBox">
          <image-drag-sort
            :max="9"
            @changeList="changeImg"
            :list="msg.disposeImgUrl"
            :disabled="true"
          ></image-drag-sort>
        </view>
        <view class="content_item">
          <view class="label"> 问题原因: </view>
          <view class="tag falutTag" v-for="(e) in msg.wxFaultCauseNames" :key="e">{{
              e }}</view>
        </view>
        <view class="content_item" v-if="msg.wxFaultCauseNames&&msg.wxFaultCauseNames.includes('其他')">
          <view class="label"> 其他原因: </view>
          <view>{{ msg.faultReasonName }}</view>
        </view>
        <view class="content_item">
          <view class="label"> 问题负责: </view>
          <view v-if="Array.isArray(msg.wxFaultTypeNames)">
            <view class="tag falutTag" v-for="item in msg.wxFaultTypeNames" :key="item">{{
           item
          }}</view>
          </view>
         
        </view>
        <view class="content_item" v-if="Array.isArray(msg.wxFaultTypeNames) && msg.wxFaultTypeNames.includes('其他')">
          <view class="label"> 其他负责: </view>
          <view>{{ msg.faultReasonWhoName }}</view>
        </view>
        <view class="content_item">
          <view class="label"> 问题描述: </view>
          <view class="desc">{{ msg.disposeDesc }}</view>
        </view>
        <view class="member">
          <image src="/static/images/maintain/add.png" mode=""></image>
          <text style="color: #333; margin-right: 8rpx">{{
            msg.malfunctionRecordVO[0].userName
          }}</text>
          {{ msg.malfunctionRecordVO[0].recordLog }}
        </view>
        <view class="time" style="margin-bottom: 20rpx">{{
          msg.malfunctionRecordVO[0].updateTime
        }}</view>
        <!-- 关联任务工单 -->
        <view
          class="relevance"
          @click="toDetail(msg.checkChildPlan)"
          v-if="msg.childPlanId !== null && orderStatus == 4"
        >
          <view class="relevance_item">
            <view class="label">关联任务:</view>
            <view
              >{{ msg.checkChildPlan.planId }}
              <text class="tag">{{ msg.checkChildPlan.typeStatusName }}</text>
            </view>
          </view>
          <view class="relevance_item">
            <view class="label">项目电梯:</view>
            <view>{{ msg.checkChildPlan.elevatorAddress }}</view>
          </view>
          <view class="relevance_item">
            <view class="label">执行人:</view>
            <view>{{ msg.checkChildPlan.userNames || "-" }}</view>
          </view>
          <view class="relevance_item">
            <view class="label">状态:</view>
            <!-- 维修的状态 -->
            <view
            v-if="msg.checkChildPlan.typeStatus==2"
              class="statusTag"
              :style="{
                color: passMap[msg.checkChildPlan.status].color,
                borderColor: passMap[msg.checkChildPlan.status].color,
              }"
              >{{ passMap[msg.checkChildPlan.status].text }}
            </view>
            <!-- 事务的状态展示 -->
            <view
            v-if="msg.checkChildPlan.typeStatus==5"
              class="statusTag"
              :style="{
                color: affairMap[msg.checkChildPlan.status].color,
                borderColor: affairMap[msg.checkChildPlan.status].color,
              }"
              >{{ affairMap[msg.checkChildPlan.status].text }}
            </view>
            <!-- 维修展示工单状态 -->
            <view
              style="margin-left: 12rpx"
              v-if="showStatus&&msg.checkChildPlan.typeStatus==2"
              class="statusTag"
              :style="{
                color: statusMap[msg.checkChildPlan.status].color,
                borderColor: statusMap[msg.checkChildPlan.status].color,
              }"
              >{{ statusMap[msg.checkChildPlan.status].text }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
import { update, del, setRecord, fetchDetail } from '@/apis/repair.js';
import { mapState, mapActions } from 'vuex';
import { hanleToken } from '@/utils/utils.js';
import { getCheckNoPass } from '@/apis/affair.js';
export default {
	components: {
		ImageDragSort,
	},
	props: {
		// 对象数组
		msg: {
			type: Object,
		},
		// 索引值
		index: {
			type: Number,
		},
		// 我自己是否还未签退
		isPlanStatus: {
			type: Boolean,
			default: false,
		},
		// 是否最后一个item
		isLast: {
			type: Boolean,
		},
		// 订单状态,如果是4不可以编辑
		orderStatus: {
			type: Number,
		},
		// 是否正在编辑的标识,每次只可以编辑一条数据
		editing: {
			type: Boolean,
			default: false,
		},
		planId: {
			type: [String, Number],
		},
		elevatorMsg: {
			type: Object,
		},
		userList: {
			type: Object,
		},
	},
	watch: {
		msg(val) {
			console.log(val,'看看数据');
		},
	},
	created() {
		// this.initData();
	},
	computed: {
		...mapState('user', ['userinfo']),
		checkContentName() {
			return this.msg.partNames.split('&amp;&amp;');
		},
		showStatus() {
			if (this.msg.checkChildPlan !== null) {
				return (
					this.msg.checkChildPlan.status == 2 ||
          this.msg.checkChildPlan.status == 3 ||
          this.msg.checkChildPlan.status == 4
				);
			} else {
				return false;
			}
		},
	},
	data() {
		return {
			passMap: {
				0: {
					text: '待指派',
					color: '#FA6400',
				},
				1: {
					text: '待审核',
					color: '#FA6400',
				},
				2: {
					text: '审核通过',
					color: '#16BF99',
				},
				3: {
					text: '审核通过',
					color: '#16BF99',
				},
				4: {
					text: '审核通过',
					color: '#16BF99',
				},
				5: {
					text: '已撤回',
					color: '#999999',
				},
				6: {
					text: '审核不通过',
					color: '#E02020',
				},
				7: {
					text: '审核通过',
					color: '#E02020',
				},
			},
			statusMap: {
				1: {
					text: '待处理',
					color: 'yellow',
				},
				2: {
					text: '待开始',
					color: '#E02020',
				},
				3: {
					text: '维修中',
					color: '#0091FF',
				},
				4: {
					text: '已完成',
					color: '#999',
				},
				7:{
					text: '已关闭',
					color: '#999',
				}
			},
			// 事务工单状态
			affairMap: {
				1: {
					text: '待指派',
					color: '#FA6400',
				},
				2: {
					text: '待开始',
					color: '#0091ff',
				},
				3: {
					text: '进行中',
					color: '#0091ff',
				},
				4: {
					text: '已完成',
					color: '#999',
				},
				5: {
					text: '已关闭',
					color: '#999',
				},
			},
			disposeImgUrl: [],
			// checkContentName:'' ,//部件名称
		};
	},
	methods: {
		// 关联工单去详情
		toDetail(res) {
			// console.log(res,666)
			// return
			if (res.typeStatus == 2) {
				//  维修
				uni.navigateTo({
					url:
            '/subpages/approve/repairDetail?planId=' +
            res.planId +
            '&elevatorId=' +
            res.elevatorId +
            '&businessApproveId=' +
            res.businessApproveId +
            '&myApply=' +
            1
				});
			} else {
				// 事务
				uni.navigateTo({
					url:
            '/subpages/repair/affair/affairDetail?planId=' +
            res.planId +
            '&elevatorId=' +
            res.elevatorId,
				});
			}
		},
		hanleReform() {
			// const params = {
			//   elevatorId: this.elevatorMsg.id,
			//   elevatorName: this.elevatorMsg.buildingName,
			//   elevatorAddress: this.elevatorMsg.elevatorAddress,
			// };
			// console.log(this.elevatorMsg,params)
			// return
			// console.log(this.msg,"this.msg")
			uni.navigateTo({
				url:
          '/pageModules/barrierSearch/barrierPage?params=' +
          JSON.stringify({...this.elevatorMsg,floorStandIds:this.msg.floorStandIds,floorStandNames:this.msg.floorStandNames}) +
          '&malHistoryId=' +
          this.msg.id + '&formPage=quality&planId=' + this.planId
          
			});
		},
		getCheckNoPassFun() {
			return new Promise((resolve) => {
				getCheckNoPass({ planId: this.planId, groupId: 0 }).then((res) => {
					resolve(res.data);
					console.log(res.data, '不通过的记录');
				});
			});
		},
		// 更新视图
		update() {},
		initData() {
			//  this.checkContentName=this.msg.partNames.split('&amp;&amp;')
			//  console.log(this.checkContentName,6666)
			//  if (this.msg.disposeImgUrl != null) {
			//   this.disposeImgUrl = this.msg.disposeImgUrl;
			//  }
		},
		changeImg(list) {
			this.disposeImgUrl = list;
		},
		// 删除记录
		async handleDel() {
			console.log(this.isPlanStatus, this.orderStatus, 'this.isPlanStatus');
			if (this.orderStatus < 4 && !this.isPlanStatus) {
				uni.showToast({
					title: '请先签到后再操作',
					icon: 'none',
				});
				return;
			}
			// await this.getDetail();
			if (this.orderStatus === 4) {
				this.$emit('hadDone');
				return;
			} else {
				uni.showModal({
					title: '',
					content: '确认删除本条任务记录?',
					confirmText: '确定',
					confirmColor: '#0091ff',
					cancelText: '取消',
					cancelColor: '#ccc',
					success: (res) => {
						if (res.confirm) {
							del({ ids: this.msg.id }).then((res) => {
								if (res) {
									uni.showToast({
										title: '删除成功',
										icon: 'none',
									});
									this.$emit('update', { type: 'del' });
								}
							});
						}
					},
				});
			}
		},
		// 添加配件
		// handleAdd(){
		//   let {partNames,partIds,disposeDesc,disposeImgUrl} = this.msg
		//   let obj = {
		//     partsId: partIds,
		//     partsName: partNames,
		//     desc: disposeDesc,
		//     imgUrls: disposeImgUrl,
		//   }
		//   hanleToken('set','partsUpObj',obj)
		//   uni.navigateTo({
		//     url: `/pageModules/parts/applyParts?malPartId=${this.msg.id}&id=${this.elevatorId}&fromPlanId=${this.planId}`,
		//   });
		// },
		// 配件详情
		// toPartsDetail(item){
		//   uni.navigateTo({
		//     url: `/subpages/approve/partApprovalDetail?type=3&id=${item.planId}`,
		//   });
		// },
		// resStr(name){
		//   return name ? name.replaceAll("&amp;&amp;"," > "):''
		// },

		// resNameColor(pStatus){
		//   return this.examineArr.find(item=>item.arrStatus.includes(pStatus)) || {}
		// },

		handleEdit() {
			if (this.orderStatus < 4 && !this.isPlanStatus) {
				uni.showToast({
					title: '请先签到后再操作',
					icon: 'none',
				});
				return;
			}
			this.$emit('editRecord', { msg: this.msg, index: this.index });
		},
		// 更新内容
		// async handleUpdate() {
		//   await this.getDetail();
		//   if (this.orderStatus == 4 && !this.updateStatus) {
		//     console.log("完成");

		//     this.$emit("hadDone");
		//   } else {
		//     const { disposeDesc } = this.form;
		//     if (disposeDesc === "" && this.disposeImgUrl.length === 0) {
		//       uni.showToast({
		//         title: "图片为必填项",
		//         icon: "none",
		//       });
		//     } else {
		//       console.log("提交新建记录");
		//       uni.showLoading({
		//         title: "保存中",
		//         mask: true,
		//       });
		//       let imgs = this.disposeImgUrl;
		//       let arr = [];
		//       for (let i = 0; i < imgs.length; i++) {
		//         arr.push({
		//           url: imgs[i],
		//           type: "image",
		//         });
		//       }
		//       this.form.disposeImgUrl = arr;
		//       this.form.planId = this.planId;
		//       const all = [
		//         this.handleDes(this.form, this.msg),
		//         update({ ...this.form, userId: this.userinfo.user_id }),
		//       ];
		//       Promise.all(all).then((res) => {
		//         console.log(res, "all的值", 88888);
		//         if (res) {
		//           this.isEdit = !this.isEdit;
		//           setTimeout(() => {
		//             uni.showToast({
		//               title: "保存成功",
		//               icon: "none",
		//             });
		//           }, 200);
		//           this.$emit("update", { isEdit: this.isEdit, type: "update" });
		//         }
		//       });
		//     }
		//   }
		// // },
		// handleDes(res, olddata) {
		//   return new Promise((resolve) => {
		//     let result = "";
		//     let imgUrl = this.disposeImgUrl || [];
		//     let oimgUrl = [];
		//     for (let i = 0; i < olddata.disposeImgUrl.length; i++) {
		//       olddata.disposeImgUrl[i];
		//       oimgUrl.push(olddata.disposeImgUrl[i].url);
		//     }
		//     let recordHistory = res.disposeDesc || "";
		//     let orecordHistory = olddata.disposeDesc || "";
		//     if (JSON.stringify(imgUrl) != JSON.stringify(oimgUrl)) {
		//       if (imgUrl.length == oimgUrl.length) {
		//         result = result + "更新了照片";
		//       } else {
		//         if (imgUrl.length > oimgUrl.length) {
		//           result =
		//             result + "上传了" + (imgUrl.length - oimgUrl.length) + "张图片";
		//         } else {
		//           result =
		//             result + "删除了" + (oimgUrl.length - imgUrl.length) + "张图片";
		//         }
		//       }
		//     }
		//     if (recordHistory != orecordHistory) {
		//       result = result + (result.length > 0 ? "，" : "");
		//       result = result + (orecordHistory ? "更新了描述" : "添加了描述");
		//     }
		//     if (!result) {
		//       resolve();
		//     }

		//     const params = {
		//       planId: this.planId,
		//       userId: this.userinfo.user_id,
		//       checkHistoryId: this.form.id,
		//       recordLog: result,
		//       recordDataValue: this.form,
		//     };
		//     console.log("params", params);
		//     editCHeckRecord(params).then((res) => {
		//       resolve(res);
		//     });
		//   });
		// },
		getDetail() {
			return new Promise((resolve) => {
				fetchDetail({ planId: this.planId }).then((res) => {
					if (res) {
						this.planOrderStatus = res.data.status;
						resolve();
					}
				});
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.affair_record {
  .title {
    font-size: 32rpx;
    color: #333;
    font-weight: 500;
    // padding-bottom: 22rpx;
    padding-left: 20rpx;
  }

  .length {
    text-align: right;
    padding-bottom: 20rpx;
    color: #ccc;
    font-size: 24rpx;
  }

  .record_item {
    // display: flex;
    width: 100%;

    .header {
      display: flex;
      padding-bottom: 8rpx;
      padding-top: 22rpx;
      justify-content: space-between;
      // align-items: center;
      .header_left {
        display: flex;
        // align-items: center;
        .partNameItem {
          display: flex;
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          flex-wrap: wrap;
          .partNameLabel {
            display: flex;
            align-items: center;
            image {
              width: 28rpx;
              height: 28rpx;
            }
          }
        }
      }

      .num {
        width: 40rpx;
        height: 40rpx;
        font-size: 26rpx;
        color: #0091ff;
        background: #ddf0ff;
        border-radius: 0rpx 4rpx 4rpx 0rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 16rpx;
      }
      .label {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 8rpx;
      }

      .name {
        display: flex;
        margin-left: 16rpx;
        // width: 354rpx;
        flex-wrap: wrap;
      }

      .handle {
        // width: 412rpx;
        display: flex;
        height: 100%;

        .handle_item {
          display: flex;
          justify-content: flex-end;
          // width: 100%;
          padding-top: 2rpx;
          box-sizing: border-box;
          width: 200rpx;
        }

        image {
          width: 32rpx;
          height: 32rpx;
          // margin-top: 2rpx;
        }

        .addBtn {
          border-right: 2rpx solid #e9e9e9;
          // justify-content: center;
          padding-right: 12rpx;
          font-size: 12px;
          color: #666666;
          margin: 0 14rpx 0 10rpx;
        }
        .editBtn {
          border-right: 2rpx solid #e9e9e9;
          justify-content: center;
          padding-right: 30rpx;
        }

        .delBtn {
          padding-left: 20rpx;
        }
        .reformBtn {
          color: #0091ff;
          width: 250rpx;
        }

        view {
          display: flex;
          // flex: 1;
          justify-content: flex-end;
        }

        .saveBtn {
          color: #0091ff;
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 24rpx;

          text {
            margin-left: 4rpx;
          }
        }
      }
    }

    .content {
      // margin-left: 56rpx;
      margin-left: 56rpx;
      padding-bottom: 32rpx;
      // border-bottom: 1;
      border-bottom: 2rpx solid #eeeeee;
      .content_item {
        margin-bottom: 16rpx;
        .label {
          color: #999;
          font-size: 24rpx;
          margin-bottom: 8rpx;
        }
        .tag {
          border: 2rpx solid #0091ff;
          border-radius: 8rpx;
          padding: 4rpx 24rpx;
          color: #0091ff;
          font-size: 26rpx;
          display: inline-block;
          margin-right: 12rpx;
        }
        .falutTag{
            margin-bottom: 8rpx;
          }
        .red {
          color: #e02020;
          border-color: #e02020;
        }
        .desc {
          color: #333;
          font-size: 28rpx;
        }
      }
      .type {
        font-size: 24rpx;
        color: #666;
        // margin-top: 8rpx;
      }

      .imgBox {
        margin: 20rpx 0;
      }

      .des {
        font-size: 28rpx;
        color: #333;
      }

      .member {
        // margin-top: 20rpx;
        color: #999;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        margin-bottom: 6rpx;

        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 10rpx;
        }
      }

      .time {
        margin-left: 34rpx;
        color: #999;
        font-size: 24rpx;
      }
      .relevance {
        background: #f6f6f6;
        padding: 16rpx;
        font-size: 24rpx;
        color: #333;
        .relevance_item {
          display: flex;
          margin-bottom: 6rpx;
          .label {
            color: #666;
            width: 120rpx;
          }
          .tag {
            color: #0091ff;
            font-size: 24rpx;
            background: #dcf0ff;
            border-radius: 4rpx;
            padding: 0 4rpx;
            margin-left: 12rpx;
          }
          
          .statusTag {
            border: 2rpx solid #999999;
            border-radius: 4rpx;
            padding: 0 8rpx;
            display: inline-block;
          }
        }
      }

      .linkPlan {
        padding: 20rpx 16rpx;
        background: #f6f6f6;
        border-radius: 8rpx;
        margin-bottom: 20rpx;

        // display: flex;
        .plan_L {
          .L_row {
            margin-bottom: 10rpx;
            font-size: 12px;
            font-weight: 400;
            color: #666666;
            display: flex;
            view:nth-of-type(1) {
              width: 180rpx;
            }
            view:nth-of-type(2) {
              color: #333;
              // width: 500rpx;
              flex: 1;
            }
            .row_plan {
              text {
                display: inline-block;
                padding: 2rpx 6rpx;
                border-radius: 8rpx;
              }
              text:nth-of-type(1) {
                margin-right: 16rpx;
              }
            }
          }
          .L_row:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>
